import { View } from "@tarojs/components";
import { useState } from "react";

interface OrderMenuProps {
  menus?: string[];
  orders?: string[];
  changeMenu?: (index: number) => void;
  changeOrder?: (index: number) => void;
}

export default ({
  menus = ["全部回复", "只看楼主"],
  orders = ["热门", "正序", "逆序"],
  changeMenu,
  changeOrder,
}: OrderMenuProps) => {
  const [menu, setMenu] = useState(0);
  const [order, setOrder] = useState(0);
  return (
    <View className="flex justify-between text-sm">
      <View className="flex gap-3">
        {menus.map((item, i) => (
          <View
            className={` ${
              menu == i ? "text-black font-semibold" : "text-gray-500"
            }`}
            key={i}
            onClick={() => {
              changeMenu && changeMenu(i);
              setMenu(i);
            }}
          >
            {item}
          </View>
        ))}
      </View>
      <View className="flex gap-[1px] bg-[#F7F7F7] text-[16px] p-[2px] rounded-full">
        {orders.map((item, i) => (
          <View
            key={i}
            className={`rounded-full   py-[1px] px-3 ${
              order == i ? "bg-white shadow font-semibold" : " bg-transparent"
            }`}
            onClick={() => {
              changeOrder && changeOrder(i);
              setOrder(i);
            }}
          >
            {item}
          </View>
        ))}
      </View>
    </View>
  );
};
